<template>
    <div class="rootMain">
        <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            active-text-color="#409EFF"
            text-color="#333333"
        >
            <el-menu-item
                class="menuItem"
                @click="clickMenu(item)"
                v-for="(item, index) in menuList"
                :key="index"
                :index="item.index"
                >{{ item.name }}</el-menu-item
            >
        </el-menu>

        <div v-loading="loading" class="ask-list">
            <div
                v-for="(item, index) in quizList"
                :key="index"
                class="ask-item"
                :class="{ 'show-del': item.status == 1 }"
                @click="goDetail(item)"
            >
                <div class="ask-title">
                    <div class="tag" :class="['tag' + item.status]">
                        {{ item.status == 1 ? "待回答" : "" }}
                        {{ item.status == 2 ? "沟通中" : "" }}
                        {{ item.status == 3 ? "已完成" : "" }}
                    </div>
                    <div class="title">{{ item.title }}</div>
                    <div class="del" @click.stop="delMyQuiz(index)">
                        <i class="el-icon-delete"></i>删除提问
                    </div>
                    <el-button
                        v-if="item.is_evaluate == 0 && item.status == 3"
                        class="pj"
                        size="mini"
                        round
                        @click.stop="pj(item)"
                        >我要评价</el-button
                    >
                </div>
                <div class="ask-time">{{ item.add_time_text }}</div>
            </div>
        </div>
        <!-- 分页 -->
        <div v-if="count > limit" class="page">
            <el-pagination
                background
                layout="prev, pager, next"
                :page-size="limit"
                :total="count"
                @current-change="changePage"
            >
            </el-pagination>
        </div>
        <template v-if="quizList.length == 0">
            <el-empty description="暂无数据"></el-empty>
        </template>

        <el-dialog
            title=""
            :visible.sync="evaluateShow"
            class="evaluate-dialog"
            width="397px"
            :close-on-click-modal="false"
        >
            <div class="evaluate">
                <div class="title">您的评价是老师进步的动力</div>
                <el-rate
                    v-model="evaluate_star"
                    show-text
                    :texts="texts"
                    :colors="['#FFC847', '#FFC847', '#FFC847']"
                >
                </el-rate>
                <div class="check-box">
                    <div
                        v-for="(item, index) in checkBoxList[evaluate_star - 1]"
                        :key="index"
                        class="check-box-group"
                        :class="{ active: item.checked }"
                        @click="selectCheckBox(index)"
                    >
                        {{ item.label }}
                    </div>
                </div>

                <el-input
                    v-model="evaluate_text"
                    type="textarea"
                    :rows="4"
                    maxlength="300"
                    placeholder="您的评价是对答主最好的鼓励"
                    resize="none"
                    class="textarea"
                >
                </el-input>
                <div class="but">
                    <el-button
                        type="primary"
                        size="mini"
                        @click="subimtEvaluate"
                        >提交</el-button
                    >
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    getJianghuMyQuiz_chat,
    recallQuiz,
    delmyquiz_chat,
} from "@/assets/api/userCenterApi.js";
import { evaluate_chat } from "@/assets/api/csjhApi";

import { mapState, mapMutations } from "vuex";

export default {
    title: "myQuiz",
    props: ["lists"],
    metaInfo() {
        return {
            title: "个人中心-我的问答",
            meta: [{ name: "keywords", content: "小竹,财税,小竹财税" }],
        };
    },
    data() {
        return {
            status: "",
            page: 1,
            limit: 5,
            count: 0,
            activeIndex: "1",
            showTipsIndex: -1,
            menuList: [
                {
                    name: "全部",
                    index: "1",
                    status: 0,
                },

                {
                    name: "待回答",
                    index: "2",
                    status: 1,
                },
                {
                    name: "沟通中",
                    index: "4",
                    status: 2,
                },
                {
                    name: "已结束",
                    index: "3",
                    status: 3,
                },
            ],
            quizList: [],

            loading: false,

            evaluateQuiz: 0,
            evaluateShow: false,
            evaluate_star: 5,
            evaluate_text: "",
            texts: [
                "不满意，各方面都很差",
                "不满意，待提高",
                "一般般，仍可改善",
                "比较满意，仍可改善",
                "特别棒，无可挑剔",
            ],
            checkBoxList: [
                [
                    {
                        label: "没解决问题",
                        checked: false,
                    },
                    {
                        label: "不专业",
                        checked: false,
                    },
                    {
                        label: "态度很差",
                        checked: false,
                    },
                    {
                        label: "回复太慢",
                        checked: false,
                    },
                    {
                        label: "听不懂回答",
                        checked: false,
                    },
                    {
                        label: "回答敷衍",
                        checked: false,
                    },
                ],
                [
                    {
                        label: "回复太慢",
                        checked: false,
                    },
                    {
                        label: "回答敷衍",
                        checked: false,
                    },
                    {
                        label: "听不懂回答",
                        checked: false,
                    },
                    {
                        label: "态度不好",
                        checked: false,
                    },
                    {
                        label: "不够专业",
                        checked: false,
                    },
                    {
                        label: "没解决问题",
                        checked: false,
                    },
                ],
                [
                    {
                        label: "态度一般",
                        checked: false,
                    },
                    {
                        label: "回答不够认真",
                        checked: false,
                    },
                    {
                        label: "不够专业",
                        checked: false,
                    },
                    {
                        label: "回答不够清楚",
                        checked: false,
                    },
                    {
                        label: "回答较慢",
                        checked: false,
                    },
                    {
                        label: "解决部分问题",
                        checked: false,
                    },
                ],
                [
                    {
                        label: "态度热情",
                        checked: false,
                    },
                    {
                        label: "回复很及时",
                        checked: false,
                    },
                    {
                        label: "专业度高",
                        checked: false,
                    },
                    {
                        label: "解决了问题",
                        checked: false,
                    },
                    {
                        label: "回答很认真",
                        checked: false,
                    },
                    {
                        label: "回答很清楚",
                        checked: false,
                    },
                ],
                [
                    {
                        label: "态度非常好",
                        checked: false,
                    },
                    {
                        label: "回答迅速",
                        checked: false,
                    },
                    {
                        label: "回答很专业",
                        checked: false,
                    },
                    {
                        label: "回答很有帮助",
                        checked: false,
                    },
                    {
                        label: "回答很认真",
                        checked: false,
                    },
                    {
                        label: "回答很清楚",
                        checked: false,
                    },
                ],
            ],
        };
    },
    mounted() {
        this.getMyQuizList();
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
    },
    methods: {
        //撤回提问
        async recallQuiz(index) {
            this.$confirm("确定撤回此问题吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    console.log(index, 898989);
                    this.recall(index);
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },

        //撤回提问
        async recall(index) {
            let params = {
                id: this.quizList[index].id,
            };
            let res = await recallQuiz(params);
            this.showTipsIndex = -1;
            if (res.code == 1) {
                this.$message({
                    message: "问题撤回成功",
                    type: "success",
                });
                this.quizList = [];
                this.page = 1;
                this.getMyQuizList();
            } else {
                this.$message({
                    message: "当前问题不能撤回",
                });
            }
        },

        //删除提问
        async delMyQuiz(index) {
            this.$confirm("确定删除此问题吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.del(index);
                })
                .catch(() => {});
        },

        async del(index) {
            let params = {
                id: this.quizList[index].id,
            };
            let res = await delmyquiz_chat(params);
            this.showTipsIndex = -1;
            if (res.code == 1) {
                this.$message({
                    message: "删除成功",
                    type: "success",
                });
                this.quizList = [];
                this.page = 1;
                this.getMyQuizList();
            }
        },

        //动态展示文字颜色
        showTypeColor(item) {
            var color = "c50A7FF";
            switch (item.type_text) {
                case "会计":
                    color = "c50A7FF";
                    break;

                case "税法":
                    color = "cFF7F7F";
                    break;
            }
            return color;
        },

        //鼠标移入
        onMouseOver(item, index) {
            this.showTipsIndex = index;
        },
        //鼠标移出
        onMouseOut() {
            this.showTipsIndex = -1;
        },
        //点击菜单
        clickMenu(item) {
            this.page = 1;
            this.status = item.status;
            this.getMyQuizList();
        },
        //获取数据
        async getMyQuizList() {
            this.loading = true;
            var params = {
                status: this.status,
                page: this.page,
                pagesize: this.limit,
            };
            let res = await getJianghuMyQuiz_chat(params);
            this.loading = false;

            if (res.code == 1) {
                this.quizList = res.data.list;
                this.count = res.data.count;
            }
        },
        goDetail(item) {
            if (item.status == 3) {
                let { href } = this.$router.resolve({
                    path: "/cswd/" + item.id + ".html",
                });
                window.open(href, "_blank");
            } else {
                this.$router.push({
                    path: `/chat/${item.id}`,
                });
            }
        },

        //分页
        changePage(e) {
            console.log("分页", e);
            this.page = e;
            this.getMyQuizList();
        },

        // 点击评价
        pj(item) {
            this.evaluateShow = true;
            this.evaluateQuiz = item.id;
        },

        // 对老师评价
        async subimtEvaluate() {
            let tags = [];
            for (let item of this.checkBoxList[this.evaluate_star - 1]) {
                if (item.checked) tags.push(item.label);
            }
            // console.log(tags);
            const res = await evaluate_chat({
                quiz_id: this.evaluateQuiz,
                star: this.evaluate_star,
                evaluate: this.evaluate_text,
                label: tags.join(","),
            });
            if (res.code == 1) {
                this.evaluateShow = false;
                this.getMyQuizList();
            }
        },

        // 选择评价
        selectCheckBox(index) {
            this.checkBoxList[this.evaluate_star - 1][index].checked =
                !this.checkBoxList[this.evaluate_star - 1][index].checked;
        },
    },
};
</script>

<style lang="scss" scoped>
@import url("@/assets/static/reset.css");

.rootMain {
    background-color: #fff;
    margin-left: 20px;

    .quizList {
        position: relative;
        padding: 20px;
        padding-left: 50px;
        background-color: #fff;
        border-bottom: 1px solid #f4f4f4;

        .leaf {
            width: 11px;
            height: 18px;
            margin-right: 2px;
        }
        .leafNum {
            margin-right: 20px;
            color: #ff5900;
            font-size: 18px;
        }

        .title {
            width: 700px;
            font-size: 18px;
        }
        .info {
            font-size: 14px;
            margin-top: 30px;

            .major {
                width: 48px;
                height: 22px;
                line-height: 22px;
                border-radius: 2px;
                font-size: 14px;
                // color: #50A7FF;
                text-align: center;
            }

            .time {
                color: #9e9e9e;
                margin-right: 20px;
            }
            .watched {
                color: #9e9e9e;
                margin-right: 20px;
            }
        }
        .tips {
            cursor: pointer;
            position: absolute;
            top: 47px;
            right: 37px;

            img {
                width: 26px;
                height: 26px;
                vertical-align: middle;
            }
        }
    }
    .page {
        padding-top: 13px;
        padding-bottom: 63px;
        display: flex;
        justify-content: center;
    }
    .cFF7F7F {
        color: #ff7f7f;
        background: #fff2f2;
    }

    .c50A7FF {
        color: #50a7ff;
        background: #eef6ff;
    }
    .cCCC {
        color: #ccc;
    }
}
</style>

<style lang="scss" scoped>
::v-deep .is-active {
    border-bottom-color: white !important;
}

.ask-list {
}

.show-del {
    &:hover .del {
        display: block;
    }
}

.ask-item {
    border-bottom: 1px solid #f4f4f4;
    padding: 33px 42px;
    // margin: 0 42px;
    cursor: pointer;
    &:hover {
        background-color: #f4f8ff;
    }

    .del {
        display: none;
        color: #909399;
        font-size: 12px;
        text-align: right;
        min-width: 75px;
        cursor: pointer;
        i {
            padding-right: 4px;
        }
    }
    .title {
        width: 100%;
        font-size: 17px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-break: break-word;
    }
    .ask-title {
        display: flex;
        font-size: 10px;
        color: #333333;
        // align-items: center;
        .tag {
            line-height: 26px;
            text-align: center;
            font-size: 14px;
            color: #50a7ff;
            width: 58px;
            min-width: 58px;
            height: 26px;
            background: #eef7ff;
            border-radius: 2px;
            margin-right: 10px;
        }
        .tag1 {
        }
        .tag2 {
            color: #2cc88d;
            background: #eff7f2;
        }
        .tag3 {
            color: #fa5151;
            background: #fff5f5;
        }

        .pj {
            position: relative;
            top: 13px;
            left: 10px;
        }
    }
    .ask-time {
        padding-top: 14px;
        font-size: 14px;
        color: #9e9e9e;
    }
}
.evaluate-dialog ::v-deep .el-dialog__body {
    padding-top: 0;
    padding-bottom: 19px;
}

.evaluate {
    text-align: center;
    .title {
        font-size: 16px;
        color: rgba(0, 0, 0, 0.85);
        margin-bottom: 9px;
    }

    .textarea {
        margin-top: 20px;
        background-color: #fafafa;
    }
    .but {
        text-align: right;
    }
}

.evaluate ::v-deep .el-rate__text {
    display: block;
    text-align: center;
    font-size: 12px;
    color: #999999 !important;
    margin-top: 13px;
}

.evaluate ::v-deep .el-rate__icon {
    font-size: 48px;
}

.evaluate ::v-deep .el-rate {
    height: auto;
}

.check-box {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 5px;
    .check-box-group {
        width: 100px;
        height: 29px;
        line-height: 29px;
        text-align: center;
        border-radius: 82px;
        border: 1px solid #dcdcdc;
        margin-top: 15px;
        font-size: 13px;
        color: #999999;
        margin: 0 6px;
        margin-top: 15px;
        cursor: pointer;
        &:hover {
            opacity: 0.8;
        }
    }
    .active {
        border-color: #1c87f3;
        color: #1c87f3;
    }
}
</style>./myquiz.vue
